<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>

    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js"></script>

    <!--angular-->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>


    <script>


        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            var jsonString='' +
                    '{"BaseType":[{"id":"10000","name":"数值类型","BaseTypeItems":[{"BaseTypeItem":[{"description":"小整数值","java":"java.lang.Integer","mysql":"TINYINT"},{"description":"大整数值","java":"java.lang.Integer","mysql":"SMALLINT"},{"description":"大整数值","java":"java.lang.Integer","mysql":"MEDIUMINT"},{"description":"大整数值","java":"java.lang.Long","mysql":"INT或INTEGER"},{"description":"极大整数值","java":"java.math.BigInteger","mysql":"BIGINT"},{"description":"单精度浮点数值","java":"java.lang.Float","mysql":"FLOAT"},{"description":"双精度浮点数值","java":"java.lang.Double","mysql":"DOUBLE"},{"description":"小数值","java":"java.math.BigDecimal","mysql":"DECIMAL"}]}]},' +
                    '{"id":"20000","name":"日期和时间类型","BaseTypeItems":[{"BaseTypeItem":[{"description":"日期值","java":"java.sql.Date","mysql":"DATE"},{"description":"时间值或持续时间","java":"java.sql.Time","mysql":"TIME"},{"description":"年份值","java":"java.sql.Date","mysql":"YEAR"},{"description":"混合日期和时间值","java":"java.sql.Timestamp","mysql":"DATETIME"},{"description":"混合日期和时间值，时间戳","java":"java.sql.Timestamp","mysql":"TIMESTAMP"}]}]},' +
                    '{"id":"30000","name":"字符串类型","BaseTypeItems":[{"BaseTypeItem":[{"description":"定长字符串","java":"java.lang.String","mysql":"CHAR"},{"description":"变长字符串","java":"java.lang.String","mysql":"VARCHAR"},{"description":"不超过 255 个字符的二进制字符串","java":"","mysql":"TINYBLOB"},{"description":"二进制形式的长文本数据","java":"java.lang.byte[]","mysql":"BLOB"},{"description":"二进制形式的中等长度文本数据","java":"","mysql":"MEDIUMBLOB"},{"description":"极大文本数据","java":"","mysql":"LONGBLOB"},{"description":"短文本字符串","java":"","mysql":"TINYTEXT"},{"description":"长文本数据","java":"java.lang.String","mysql":"TEXT"},{"description":"中等长度文本数据","java":"","mysql":"MEDIUMTEXT"},{"description":"极大文本数据","java":"","mysql":"LONGTEXT"},{"description":"","java":"","mysql":"ENUM"},{"description":"","java":"","mysql":"SET"}]}]}]}';
            var parse_json_by_eval = function(str){
                return eval('('+str+')');
            }
            $scope.baseTypes = parse_json_by_eval(jsonString);
            console.log($scope.baseTypes);


            // 使用默认参数
            $('select').selected();
            // 设置参数
            $('select').selected({
                btnWidth: '300px',
                btnSize: 'xl',
                btnStyle: 'primary',
                maxHeight: '100px'
            });
        });



    </script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <form action="" data-am-validator>

        <table class="am-table am-table-striped am-table-hover">
            <thead>
            <tr>
                <th>操作</th>
                <th>名称</th>
                <th>类型</th>
                <th>含义</th>
                <th>最小值</th>
                <th>最大值</th>
                <th>可查询</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><a href="add(data)">增加</a> </td>
                <td>ID</td>
                <td>
                    <select data-am-selected disabled >
                        <optgroup label="{{baseType.name}}" ng-repeat="baseType in baseTypes.BaseType">
                            <option value="{{baseTypeItem.mysql}}" ng-repeat="baseTypeItem in baseType.BaseTypeItems[0].BaseTypeItem">{{baseTypeItem.mysql+ "-" +baseTypeItem.java+ "-" +baseTypeItem.description}}</option>
                        </optgroup>
                    </select>
                </td>
                <td>
                    <div class="am-form-group ">
                        <input type="text" class="" placeholder="含义" value="主键"  disabled>
                    </div>
                </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="最小值" disabled>
                    </div>
                </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="最大值" disabled>
                    </div>
                </td>
                <td>
                    <div class="am-checkbox">
                    <label>
                        <input type="checkbox" disabled> 可查询
                    </label>
                </div>
                </td>
            </tr>
            <tr>
                <td><a href="">上移</a>  <a href="">下移</a> <a href="">增加</a> <a href="">删除</a> <a href="">编辑</a> </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="名称">
                    </div>
                </td>
                <td>
                    <select data-am-selected >
                        <optgroup label="{{baseType.name}}" ng-repeat="baseType in baseTypes.BaseType">
                            <option value="{{baseTypeItem.mysql}}" ng-repeat="baseTypeItem in baseType.BaseTypeItems[0].BaseTypeItem">{{baseTypeItem.mysql+ "-" +baseTypeItem.java+ "-" +baseTypeItem.description}}</option>
                        </optgroup>
                    </select>
                </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="含义">
                    </div>
                </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="最小值">
                    </div>
                </td>
                <td>
                    <div class="am-form-group">
                        <input type="text" class="" placeholder="最大值">
                    </div>
                </td>
                <td>
                    <div class="am-checkbox">
                        <label>
                            <input type="checkbox"> 可查询
                        </label>
                    </div>
            </tr>
            </tbody>
        </table>

        <button type="button" class="am-btn am-btn-primary am-btn-block">保存</button>
    </form>
</div>
</body>

</html>